<template>
  <el-row>
    <el-col :span="5">
      <div class="box">
        <el-scrollbar>
          <basic-container>
            <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick"/>
          </basic-container>
        </el-scrollbar>
      </div>
    </el-col>
    <el-col :span="19">
      <basic-container>
        <avue-crud :option="option"
                   v-model:search="search"
                   v-model:page="page"
                   v-model="form"
                   :table-loading="loading"
                   :data="data"
                   :permission="permissionList"
                   :before-open="beforeOpen"
                   ref="crud"
                   @row-update="rowUpdate"
                   @row-save="rowSave"
                   @row-del="rowDel"
                   @search-change="searchChange"
                   @search-reset="searchReset"
                   @selection-change="selectionChange"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @refresh-change="refreshChange"
                   @on-load="onLoad">
          <template #menu-left>
            <el-button type="danger"
                       icon="el-icon-delete"
                       plain
                       v-if="permission.group_delete"
                       @click="handleDelete">删 除
            </el-button>
          </template>
          <template #menu="{row,index,size}">
            <el-button text type="primary"
                       icon="el-icon-setting"
                       @click="viewDetail(row)">配置
            </el-button>
            <el-button text
                       type="primary"
                       icon="el-icon-edit"
                       @click="$refs.crud.rowEdit(row,index)">编辑
            </el-button>
            <el-button text
                       type="primary"
                       icon="el-icon-delete"
                       @click="$refs.crud.rowDel(row,index)">删除
            </el-button>
            <el-button text
                       type="primary"
                       icon="el-icon-circle-plus"
                       @click.stop="handleAdd(row,index)">
              子分组
            </el-button>
          </template>
          <template #groupName="{ row }">
            <el-tag size="large" style="cursor:pointer" @click="viewDetail(row)">{{ row.groupName }}</el-tag>
          </template>
        </avue-crud>
      </basic-container>
    </el-col>
  </el-row>
</template>


<script>
import {getList, getDetail, getTree, add, update, remove} from "@/api/iot/group";
import {option} from "@/option/iot/group";
import {mapGetters} from "vuex";

export default {
  data() {
    return {
      form: {},
      query: {},
      search: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      option: option(this),
      data: [],
      treeData: [],
      treeOption: {
        nodeKey: 'id',
        addBtn: false,
        menu: false,
        props: {
          labelText: '标题',
          label: 'title',
          value: 'value',
          children: 'children',
        },
      },
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.validData(this.permission.group_add, false),
        viewBtn: this.validData(this.permission.group_view, false),
        delBtn: this.validData(this.permission.group_delete, false),
        editBtn: this.validData(this.permission.group_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  created() {
    this.onLoadTree();
  },
  methods: {
    nodeClick(data) {
      this.page.currentPage = 1;
      this.onLoad(this.page, {id: data.id});
    },
    handleAdd(row) {
      this.$refs.crud.modelValue.parentId = row.id;
      this.$refs.crud.option.column.filter(item => {
        if (item.prop === "parentId") {
          item.value = row.id;
          item.addDisabled = true;
        }
      });
      this.$refs.crud.rowAdd();
    },
    rowSave(row, done, loading) {
      if (this.validatenull(row.parentId)) {
        row.parentId = 0;
      }
      add(row).then(() => {
        this.onLoadTree();
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        window.console.log(error);
      });
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(() => {
        this.onLoadTree();
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        console.log(error);
      });
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoadTree();
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            return remove(this.ids);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
          });
    },
    viewDetail(row) {
      this.$router.push({
        path: `/iot/group/detail/${row.id}`,
      });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then(res => {
          this.form = res.data.data;
        });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoadTree();
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;

      let values = {
        ...this.query,
        ...params
      };

      getList(page.currentPage, page.pageSize, values).then(res => {
        this.data = res.data.data;
        this.loading = false;
        getTree().then(res => {
          const column = this.findObject(this.option.column, "parentId");
          column.dicData = res.data.data;
        });
      });
    },
    onLoadTree() {
      getTree().then(res => {
        this.treeData = res.data.data;
      });
    }
  }
};
</script>

<style>
</style>
